<template>
    <div>
        <div>
            <el-input placeholder="添加职位"
                      prefix-icon="Plus"
                      v-model="position.name"
                      class="addPosition"
                      @keydown.enter="addHandler"
            ></el-input>
            <el-button type="primary" icon="Plus" style="margin-bottom: 7px;" @click="addHandler">添加</el-button>
        </div>
        <div>
            <el-table
                    :data="positions"
                    border
                    style="width: 70%"
                    stripe
                    @selection-change="selectionHandler"
            >
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="id" label="编号" width="80"/>
                <el-table-column prop="name" label="职位" width="180"/>
                <el-table-column prop="createdDate" label="创建时间" width="180"/>
                <el-table-column prop="isActive" label="是否启用" width="100"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="editHandler(scope.index, scope.row)">编辑
                        </el-button>
                        <el-button type="danger" size="small" @click="deleteHandler(scope.index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="danger" :disabled="this.multiSelection.length == 0" style="margin-top: 10px;" @click="batchDelete">批量删除</el-button>
        </div>
    </div>
    <el-dialog
            v-model="editRow.dialogVisible"
            title="编辑"
            width="30%">
        <el-tag>职位名称</el-tag>
        <el-input prefix-icon="Plus"
                  v-model="editRow.row.name"
                  class="updatePosInput"
                  size="small"></el-input>
        <template #footer>
          <span class="dialog-footer">
              <el-button type="primary" @click="saveHandler">保存</el-button>
            <el-button @click="editRow.dialogVisible = false">取消</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>
    import {deleteRequest, getRequest, postRequest, putRequest } from "../../../http";
    import {ElMessage, ElMessageBox} from 'element-plus'

    export default {
        name: "PosManagement",
        data() {
            return {
                position: {
                    name: '',
                    isActive: 1
                },
                positions: [],
                editRow: {
                    dialogVisible: false,
                    row: {}
                },
                multiSelection:[]
            }
        },
        mounted() {
            this.initialPos();
        },
        methods: {
            initialPos() {
                getRequest('/api/SystemConfig/basic/pos').then(resp => {
                    if (resp) {
                        this.positions = resp.data;
                    }
                });
            },
            selectionHandler(values){
                this.multiSelection = values;
            },
            editHandler(index, row) {
                Object.assign(this.editRow.row, row);
                this.editRow.dialogVisible = true;
            },
            deleteHandler(index, row) {
                ElMessageBox.confirm(
                    `你确定要删除[${row.name}]吗?`,
                    '系统提示',
                    {
                        confirmButtonText: "确认",
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(() => {
                    deleteRequest('/api/SystemConfig/basic/pos', {
                        id:row.id
                    }).then(resp => {
                        if(resp)
                        {
                            this.initialPos();
                        }
                    });
                }).catch(() => {

                });
            },
            addHandler() {
                if (!this.position.name) {
                    ElMessage.error("请输入职位名称");
                    return;
                }
                postRequest('/api/SystemConfig/basic/pos', {
                    name:this.position.name
                }).then(resp => {
                    if(resp){
                        this.position.name = '';
                        this.initialPos();
                    }
                });
            },
            saveHandler() {
                if (!this.editRow.row.name) {
                    ElMessage.error("职位名称不能为空");
                    return;
                }
                let row = this.editRow.row;
                putRequest('/api/SystemConfig/basic/pos', {
                    id:row.id,
                    name:row.name
                }).then(resp => {
                    if(resp){
                        this.editRow.dialogVisible = false;
                        this.editRow.row = {};
                        this.initialPos();
                    }
                });
            },
            batchDelete(){
                ElMessageBox.confirm(
                    `你确认要删除[${this.multiSelection.length}]条吗?`,
                    '系统提示',
                    {
                        confirmButtonText: "确认",
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(()=>{
                    let pos = [];
                    this.multiSelection.forEach(p=>{
                        pos.push(p.id);
                    });
                    deleteRequest('/api/SystemConfig/basic/batchDeletePos',pos).then(resp=>{
                        if(resp){
                            this.initialPos();
                        }
                    });
                }).catch(()=>{});
            }
        }
    }
</script>

<style scoped>
    .addPosition {
        width: 300px;
        margin-right: 8px;
    }
    .updatePosInput{
        width: 200px;
        margin-left: 8px;
    }
</style>
